<div class="animated fadeIn">
  <div class="row">
    <div class="col-12">
      <div class="card email-app">
        <nav>
          <a href="#" class="btn btn-danger btn-block">New Email</a>

          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fa fa-inbox"></i> Inbox <span class="badge badge-danger">4</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fa fa-star"></i> Stared</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fa fa-rocket"></i> Sent</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fa fa-trash-o"></i> Trash</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fa fa-bookmark"></i> Important<span class="badge badge-info">5</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fa fa-inbox"></i> Inbox <span class="badge badge-danger">4</span></a>
            </li>
          </ul>
        </nav>

        <main>

          <div class="message clearfix">

            <p class="text-center">New Message</p>

            <form>
              <div class="form-group row">
                <label for="to" class="col-sm-1 form-control-label">To:</label>
                <div class="col-sm-11">
                  <input type="email" class="form-control" id="to" placeholder="Type email">
                </div>
              </div>

              <div class="form-group row">
                <label for="cc" class="col-sm-1 form-control-label">CC:</label>
                <div class="col-sm-11">
                  <input type="email" class="form-control" id="cc" placeholder="Type email">
                </div>
              </div>

              <div class="form-group row">
                <label for="bcc" class="col-sm-1 form-control-label">BCC:</label>
                <div class="col-sm-11">
                  <input type="email" class="form-control" id="bcc" placeholder="Type email">
                </div>
              </div>

            </form>

            <div class="row">
              <div class="col-sm-11 offset-sm-1">

                <div class="btn-toolbar" role="toolbar">

                  <div class="btn-group">
                    <button type="button" class="btn btn-secondary"><span class="fa fa-bold"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-italic"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-underline"></span></button>
                  </div>

                  <div class="btn-group">
                    <button type="button" class="btn btn-secondary"><span class="fa fa-align-left"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-align-right"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-align-center"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-align-justify"></span></button>
                  </div>

                  <div class="btn-group">
                    <button type="button" class="btn btn-secondary"><span class="fa fa-indent"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-outdent"></span></button>
                  </div>

                  <div class="btn-group">
                    <button type="button" class="btn btn-secondary"><span class="fa fa-list-ul"></span></button>
                    <button type="button" class="btn btn-secondary"><span class="fa fa-list-ol"></span></button>
                  </div>

                  <button type="button" class="btn btn-secondary"><span class="fa fa-trash-o"></span></button>
                  <button type="button" class="btn btn-secondary"><span class="fa fa-paperclip"></span></button>

                  <div class="btn-group">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"><span class="fa fa-tags"></span> <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#">add label <span class="badge badge-danger"> Home</span></a></li>
                      <li><a href="#">add label <span class="badge badge-info">Job</span></a></li>
                      <li><a href="#">add label <span class="badge badge-success">Clients</span></a></li>
                      <li><a href="#">add label <span class="badge badge-warning">News</span></a></li>
                    </ul>
                  </div>

                </div>

                <br/>

                <div class="form-group">

                  <textarea class="form-control" id="message" name="body" rows="12" placeholder="Click here to reply"></textarea>

                </div>

                <div class="form-group">

                  <button type="submit" class="btn btn-success">Send</button>
                  <button type="submit" class="btn btn-secondary">Draft</button>
                  <button type="submit" class="btn btn-danger">Discard</button>

                </div>

              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  </div>
</div>
